@extends('layouts.default')

@section('title', '教研活动-管理查看')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script type="text/javascript" src="{{ asset('app/js/echarts.min.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var cxmDemo;
        var pxmDemo;
        var xmCourseDemo;
        var PageId = "{{request()->get('id',0)}}";
        var filters = {};
        var perPage = 10;
        var totalNum = 0;

        //自定义验证规则
        form.verify({
            otherReq: function(value,item){
                var $ = layui.$;
                var verifyName=$(item).attr('name')
                , verifyType=$(item).attr('type')
                ,formElem=$(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
                ,verifyElem=formElem.find('input[name='+verifyName+']')//获取需要校验的元素
                ,isTrue= verifyElem.is(':checked')//是否命中校验
                ,focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
                if(!isTrue || !value){
                    //定位焦点
                    focusElem.css(verifyType=='radio'?{"color":"#FF5722"}:{"border-color":"#FF5722"});
                    //对非输入框设置焦点
                    focusElem.first().attr("tabIndex","1").css("outline","0").blur(function() {
                        focusElem.css(verifyType=='radio'?{"color":""}:{"border-color":""});
                    }).focus();
                    return '必填项不能为空';
                }
            }
        });

        renderSelect();

        laydate.render({
            elem: '#begin-date'
            ,type: 'date'
        });
        laydate.render({
            elem: '#end-date'
            ,type: 'date'
        });
        //日期时间范围
        laydate.render({
            elem: '#live-date'
            ,type: 'datetime'
            ,range: true
        });

        //下拉框初始化
        async function renderSelect(){
            await renderDictionarySelect();
            await renderCoursesSelect();
            await renderDicSelect();
            await renderTermSelect();
            await renderCompere();
            await renderParticipants();
            pageInit();
            renderProgressTable();
        }

        //字典下拉框数据渲染
        function renderDictionarySelect() {
            return new Promise((resolve) => {
                getDictionaryItem({'diccode': ['SUBJECT','classItem']}, function (res){//, 'SUBJECT', 'LEVEL'
                    if(res.code === 1) {
                        let data = res.data;

                        for(var k in data) {
                            let key = k.toLowerCase();
                            let d = data[k];

                            $('[data-role='+key+'List]').empty().append('<option value="">请选择</option>');
                            for (var i in d) {
                                $('[data-role='+key+'List]').append('<option value="' + d[i].optionId + '">' + d[i].selectValue + '</option>');
                            }
                        }

                        form.render();

                        resolve();
                    }
                });
            });
        }
        //学科下拉框数据渲染
        function renderCoursesSelect() {
            return new Promise((resolve) => {
                getDictionaryXmSelect({'diccode': ['SUBJECT']},function(res){
                    if(res.code == 1){
                        xmCourseDemo = xmSelect.render({
                            el: '#courses',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            height: '480px',
                            name:'course_item',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'年级不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            model: {
                                label: {
                                    type: 'block',
                                    block: {
                                        //最大显示数量, 0:不限制
                                        showCount: 0,
                                        //是否显示删除图标
                                        showIcon: false,
                                    }
                                }
                            },
                            disabled:true,
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data.SUBJECT
                            }
                        })

                        return resolve();
                    }
                });
            });
        }

        //字典下拉框数据渲染
        function renderDicSelect() {
            return new Promise((resolve) => {
                getDicListByCodes({'diccode': ['HDLB']}, function (res){
                    if(res.code === 1) {
                        let data = res.data;

                        for(var k in data) {
                            // $('[data-role='+k+'List]').empty().append('<option value="">请选择</option>');
                            let d = data[k];
                            for (var i in d) {
                                $('[data-role='+k+'List]').append('<option value="' + d[i].itemcode + '">' + d[i].itemname + '</option>');
                            }
                        }

                        form.render();

                        resolve();
                    }
                });
            });
        }

        //学期下拉框数据渲染
        function renderTermSelect() {
            return new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        // $('[data-role=termList]').empty().append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('[data-role=termList]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }

                        form.render('select');

                        resolve();
                    }
                });
            });
        }

        //主讲教师下拉框数据渲染
        function renderCompere() {
            return new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        cxmDemo = xmSelect.render({
                            el: '#cter',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            filterable: true,
                            height: 'auto',
                            name:'compere',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'主讲教师不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            model: {
                                label: {
                                    type: 'block',
                                    block: {
                                        //最大显示数量, 0:不限制
                                        showCount: 0,
                                        //是否显示删除图标
                                        showIcon: false,
                                    }
                                }
                            },
                            disabled:true,
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data
                            }
                        })

                        return resolve();
                    }
                });
            });
        }
        //参与教师下拉框数据渲染
        function renderParticipants() {
            return new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        pxmDemo = xmSelect.render({
                            el: '#pter',
                            autoRow: true,
                            filterable: true,
                            tree: {
                                show: true,
                                showFolderIcon: true,
                                showLine: true,
                                indent: 20,
                                expandedKeys:false
                            },
                            direction: 'down',
                            filterable: true,
                            height: 'auto',
                            name:'participant',
                            layVerify: 'required',
                            layVerType: 'msg',
                            layReqText:'参与教师不能为空',
                            theme: {
                                color: '#2d8cf0',
                            },
                            model: {
                                label: {
                                    type: 'block',
                                    block: {
                                        //最大显示数量, 0:不限制
                                        showCount: 0,
                                        //是否显示删除图标
                                        showIcon: false,
                                    }
                                }
                            },
                            disabled:true,
                            searchTips:'关键字搜索',
                            data: function(){
                                return res.data
                            }
                        })

                        return resolve();
                    }
                });
            });
        }

        //数据渲染
        function pageInit(){
            getTeaActivityOne({id:PageId}, function(res) {
                if(res.code === 1) {
                    let Activity = res.data;
                    let TeachingActivity = Activity.teaching_activity;
                    let oldLevel = Activity.level && Activity.level_array.length > 0 ? Activity.level_array[0].selectValue : '校级';

                    form.val('infoForm', {
                        'id': PageId,
                        'data_version_id': Activity.data_version_id,
                        'name': Activity.name,
                        'begin_date': Activity.begin_date,
                        'end_date': Activity.end_date,
                        'activity_level': TeachingActivity.activity_level ? TeachingActivity.activity_level : oldLevel,
                        'course': Activity.course_set[0].optionId,
                        'teaching_type': TeachingActivity ? TeachingActivity.teaching_type : '',
                        'activity_type': TeachingActivity ? TeachingActivity.activity_type : '',
                        'is_open': TeachingActivity ? TeachingActivity.is_open : '',
                        'place': TeachingActivity ? TeachingActivity.place : '',
                        'content': TeachingActivity ? TeachingActivity.content : ''
                    });

                    if(Activity.course && Activity.course_set.length > 0) {
                        let courseSelected = [];
                        layui.each(Activity.course_set, function(i, d) {
                            courseSelected.push(d.optionId);
                        });
                        xmCourseDemo.setValue(courseSelected);
                    }

                    if(TeachingActivity.is_sign == 1) {
                        $("#sign-in").removeClass("layui-hide");
                    }

                    //参与教师
                    cxmDemo.setValue(Activity.participants_users.pere);
                    pxmDemo.setValue(Activity.participants_users.pant);

                    form.render();
                } else {
                    layer.msg('无数据记录', {time: 2000, icon: 5});
                }
            });
        }

        // 搜索查询
        form.on('submit(queryBtn)', function(data) {
            var param = data.field;
            filters = param
            renderProgressTable(1, perPage);
        });
        // 重置
        form.on('submit(resetBtn)', function(data) {
            filters = {};
            $('#search-form')[0].reset();
            renderProgressTable(1, perPage)
        });
        function renderProgressTable(page, limit){
            if ($.isEmptyObject(filters)){
                let param = form.val("search-form");
                filters = param;
            }

            var para = {
                "page": page,
                "search": filters,
                "limit": limit,
                "id": PageId
            };
            getTeaActivityJoins(para, function(res) {
                if(res.code === 1) {
                    let ListData = res.data.list;

                    renderNumberShow(res.data.statistic);

                    if(totalNum != ListData.total) {
                        totalNum = ListData.total;
                        perPage = ListData.limit;
                        renderPageBar(page, perPage)
                    }

                    table.render({
                        data: ListData.data,
                        elem: '#teachingActivityTable',
                        cellMinWidth: 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                        limit: ListData.limit,
                        skin: 'nob',
                        cols: [[
                            {type: 'numbers', title: '序号', align: 'center'},
                            {field: 'name', title: '教师姓名', align: 'center'},
                            {field: 'subject_info', title: '任教学科', align: 'center'},
                            {field: 'class_info', title: '任教班级', align: 'center'},
                            {field: 'sign_status', title: '签到状态', align: 'center', templet: function(d) {
                                return d.sign_status ? '已签到' : '<span style="color: #ccc;">未签到</span>';
                            }},
                            {field: 'homework', title: '作业完成进度', align: 'center'},
                            {field: 'sub_date', title: '提交时间', align: 'center'},
                            {title: '操作', align: 'center', toolbar: '#optDemo', fixed:'right',width:'16%'}
                        ]],
                        id:"teachingActivityTable",
                        done: function(res, curr, count) {
                            setBtnPermission();
                            curr_page = page;
                        },
                        // page: false,
                        loading: true
                    });
                } else {
                    layer.msg('无数据记录', {time: 2000, icon: 5});
                }
            });
        }

        // 渲染页面
        function renderPageBar(page,limit) {
            laypage.render({
                elem: 'pageBar',
                count: totalNum, //数据总数，从服务端得到
                curr: page,
                first: '第一页',
                last: '最后一页',
                limit:limit,
                layout: ['limit','count', 'prev', 'page', 'next', 'skip'],
                jump: function(obj, first) {
                    //首次不执行
                    if(!first) {
                        layer.closeAll();
                        renderProgressTable(obj.curr, obj.limit)
                    }
                }
            });
        }

        // 页面统计数据渲染
        function renderNumberShow(d) {
            let doneRate = d.total > 0 ? Math.floor(d.done/d.total * 100) : 0;
            // let pendingRate = d.done > 0 || d.pending > 0 ? 100 - doneRate : 0;
            let pendingRate = d.total > 0 && d.pending > 0 ? Math.floor(d.pending/d.total * 100) : 0;

            $("#total-number").html(d.total);
            $("#done-number").html(d.done);
            $("#pending-number").html(d.pending);
            $("#done-rate").html(doneRate + '%');
            $("#pending-rate").html(pendingRate + '%');

            doneEchartInit(d.done, d.pending);
            pendingEchartInit(d.pending, d.done);
        }

        // 饼图
        function doneEchartInit(done, pending){
            var myChart = echarts.init(document.getElementById('done-echart'));
            var option = option = {
                    tooltip: {
                        trigger: 'item'
                    },
                    series: [{
                        type: 'pie',
                        radius: ['50%', '56%'],
                        avoidLabelOverlap: false,
                        color: [
                            '#fac858',
                            '#ececef'
                        ],
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'outside'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '14',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: done, name: '已完成' },
                            { value: pending, name: '待完成' }
                        ]
                    }]
                };
            option && myChart.setOption(option);
        }

        function pendingEchartInit(pending, done){
            var myChart2 = echarts.init(document.getElementById('pending-echart'));
            var option2 = {
                tooltip: {
                    trigger: 'item'
                },
                series: [{
                    type: 'pie',
                    radius: ['50%', '56%'],
                    avoidLabelOverlap: false,
                    color: [
                        '#fac858',
                        '#ececef'
                    ],
                    itemStyle: {
                        borderRadius: 5,
                        borderColor: '#fff',
                        borderWidth: 1
                    },
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '14',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: pending,name:'待完成' },
                        { value: done,name:'已完成'},
                    ]
                }]
            };
            option2 && myChart2.setOption(option2);
        }

        //监听行工具事件
        table.on('tool(teachingActivityTable)', function(obj){
            var data = obj.data;

            if(obj.event === 'download'){
                downloadHomework({activity_id: data.activity_id, user_id: data.user_id},function(res){
                    if(res.code == '1'){
                        exportsDel(res.data.file_name, '/download/zip/'+res.data.file_name);
                    }else{
                        layer.msg(res.msg, {icon: 5,shift : 6});
                    }
                })
            }else if(obj.event === 'push'){
                layer.confirm('确定此处理吗?', function(index){
                    dealActivityPush({'id':data.activity_id, user_id: data.user_id},function(res){
                        if(res.code == '1'){
                            var tr = obj.tr;
                            layer.msg(res.msg,{icon: 6,time: 1000});
                            //alert(res.data != 1?'推送':'取消推送')
                            $(tr).find('.push').text(res.data != 1?'推送':'取消推送')
                            layer.close(index);
                        }else{
                            layer.msg(res.msg, {icon: 5,shift : 6});
                        }
                    })


                });
            }
        });

        // 导出
        $("#export").on('click', function() {
            let param = form.val("search-form");
            filters = param;

            var para = {"search": filters, id: PageId};
            exportJoinProgress(para, function(res) {
                if(res.code == '1'){
                    exportsDel('教研活动-教师完成进度列表.xlsx', '/download/excel/'+res.data.file_name);
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });
        });

        function exportsDel(showName,fileName){
            window.location.href = "{{ route('download.FileDownloadDel') }}?filename="+showName+"&file_url="+fileName;
        }

        //获取签到二维码
        $('#sign-in').on('click', function(){
            layer.open({
                type: 1
                ,title:'签到二维码'
                ,content: $('#view-qr-code')
                ,area: ['500px', '450px']
                ,success: function(layero, index){
                    getQRCode({'id': PageId},function(res){
                        if(res.code == 1){
                            var qrCodeTpl = qrCodeView.innerHTML
                                ,viewQRCode = document.getElementById('view-qr-code');

                            laytpl(qrCodeTpl).render(res.data, function(html){
                                viewQRCode.innerHTML = html;
                            });
                        }
                    })
                }
            });
        });

        $(".cancel-btn").click(function(){
            layer.closeAll();
        });
    });

    $(document).on('click','#copy',function(){
        copyText($(document).find('#qrcode-url').attr('value'));
    })
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 10px;}
    .panel-title h3{margin-bottom: 20px;font-weight: 800;}

    .opt-form{padding: 20px 5px 0;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button, .back-btn{margin-left: 10px;}
    .opt-form .layui-row{margin-bottom: 10px;}

    #sign-in{float: right;}

    .progress-row{min-height: 300px;padding: 0 5px 20px;}

    #manage-info .layui-row{margin: 10px;}
    #manage-info .layui-panel{border: none;box-shadow: none;}
    .show-area{display:flex;align-items:center;justify-content:center;}
    .icon-show{display:flex;align-items:center;justify-content:center;width: 60px;height: 60px;background: #2D8CF0;border-radius: 50%;float: right;}
    .grid-col{display:flex;align-items:center;justify-content:center;}
    .icon-set{font-size: 28px;color: ghostwhite;}

    .number-area div{margin-top: 5px;}
    .show-number{font-size: 20px;margin-right: 10px;}

    .dotted-border{position: relative;border-right: 1px #dedcdc dashed;border-left: 1px #dedcdc dashed;}
    .dotted-border .mask-span{display: block;width: 2px;height: 46px;background-color: #fff;}
    .dotted-border .left-top{position: absolute;top: 0px;left: -2px;}
    .dotted-border .left-bottom{position: absolute;bottom: 0px;left: -2px;}
    .dotted-border .right-top{position: absolute;top: 0px;right: -2px;}
    .dotted-border .right-bottom{position: absolute;bottom: 0px;right: -2px;}

    .chart-area{position: relative;}
    .chart-number{position: absolute;z-index: 99099;right: 34.3%;top: 40%;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <form class="layui-form opt-form" action="" id="info-form" lay-filter="infoForm">
            <div class="layui-row">
                <div class="panel-title">
                    <h3>教研活动 - 基本设置</h3>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">学年学期：</label>
                        <div class="layuik-input-inline">
                            <select disabled class="data-version-id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">教研名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">教研形式：</label>
                        <div class="layuik-input-inline">
                            <input type="radio" name="teaching_type" title="在线" value="1" class="layui-radio">
                            <input type="radio" name="teaching_type" title="离线" value="2" class="layui-radio">
                            <button id="sign-in" class="pear-btn pear-btn-primary layui-hide" type="button">签到二维码</button>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">活动类别：</label>
                        <div class="layuik-input-inline">
                            <select disabled name="activity_type" lay-filter="hdlbList" data-role="hdlbList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">学科：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="courses" class="xm-select-courses"></div>
                            <!-- <select disabled name="course" lay-filter="subjectList" data-role="subjectList" lay-verify="required" lay-reqText="不能为空"></select> -->
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">级别：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="activity_level" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">公开课：</label>
                        <div class="layuik-input-inline">
                            <input type="radio" name="is_open" title="是" value="1" lay-verify="otherReq" class="layui-radio">
                            <input type="radio" name="is_open" title="否" value="2" lay-verify="otherReq" class="layui-radio">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">地址：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="place" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">开始日期：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="begin_date" id="begin-date" required lay-verify="required" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label">结束日期：</label>
                        <div class="layuik-input-inline">
                            <input disabled type="text" name="end_date" id="end-date" required lay-verify="required" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">教研内容：</label>
                        <div class="layuik-input-inline">
                            <textarea disabled name="content" id="" rows="3" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">主讲教师：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="cter" class="xm-select-demo"></div>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">参与教师：</label>
                        <div class="layuik-input-inline">
                            <div type="text" id="pter" class="xm-select-demo"></div>
                        </div>
                    </div>
                </div>
            </div>
        </form>

        <div class="layui-row progress-row">
            <div class="panel-title">
                <h3>教研活动 - 完成进度</h3>
            </div>

            <div class="layui-card" id="manage-info">
                <div class="layui-panel">
                    <div class="layui-card-body" >
                        <div class="layui-row layui-col-space12 show-area">
                            <div class="layui-col-md4">
                                <div class="layui-row layui-col-space12 grid-col">
                                    <div class="layui-col-md6 icon-area">
                                        <div class="icon-show"><i class="layui-icon layui-icon-table icon-set"></i></div>
                                    </div>
                                    <div class="layui-col-md6 number-area">
                                        <div><span class="show-title">参与人数</span></div>
                                        <div><span class="show-number" id="total-number">0</span><span>人</span></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4 dotted-border">
                                <span class="mask-span left-top"></span><span class="mask-span left-bottom"></span><span class="mask-span right-top"></span><span class="mask-span right-bottom"></span>
                                <div class="layui-row layui-col-space12 grid-col">
                                    <div class="layui-col-md3 icon-area">
                                        <div class="icon-show"><i class="layui-icon layui-icon-form icon-set"></i></div>
                                    </div>
                                    <div class="layui-col-md3 number-area">
                                        <div><span class="show-title">已完成人数</span></div>
                                        <div><span class="show-number" id="done-number">0</span><span>人</span></div>
                                    </div>
                                    <div class="layui-col-md6 chart-area">
                                        <span class="chart-number" id="done-rate"></span>
                                        <div id="done-echart" style="width: 120%;height:120px;"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-col-md4">
                                <div class="layui-row layui-col-space12 grid-col">
                                    <div class="layui-col-md3 icon-area">
                                        <div class="icon-show"><i class="layui-icon layui-icon-log icon-set"></i></div>
                                    </div>
                                    <div class="layui-col-md3 number-area">
                                        <div><span class="show-title">待完成人数</span></div>
                                        <div><span class="show-number" id="pending-number">0</span><span>人</span></div>
                                    </div>
                                    <div class="layui-col-md6 chart-area">
                                        <span class="chart-number" id="pending-rate"></span>
                                        <div id="pending-echart" style="width: 120%;height:120px;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 查询 -->
                        <div class="layui-row">
                            <form class="layui-form" id="search-form" lay-filter="search-form">
                                <div class="layui-form-item">
                                    <div class="layui-inline">
                                        <label class="layui-form-label" >姓名:</label>
                                        <div class="layui-input-inline">
                                            <input type="text" name="name" class="layui-input" placeholder="请输入姓名" autocomplete="off">
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label" >任教学科:</label>
                                        <div class="layui-input-inline">
                                            <select name="course" lay-filter="subjectList" data-role="subjectList"></select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <label class="layui-form-label" >任教班级:</label>
                                        <div class="layui-input-inline">
                                            <select name="class_item" lay-filter="classitemList" data-role="classitemList"></select>
                                        </div>
                                    </div>
                                    <div class="layui-inline">
                                        <div class="layuik-input-inline">
                                            <button type="button" lay-submit lay-filter="queryBtn" class="layui-btn layui-btn-normal">查询</button>
                                            <button type="button" lay-submit lay-filter="resetBtn" class="layui-btn layui-btn-primary">重置</button>
                                            <button btnPermission="254" type="button" class="layui-btn" id="export">导出</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="layui-row" >
                            <script type="text/html" id="optDemo">
                                <a class="layui-btn layui-btn-primary layui-border-blue layui-btn-xs" href="{{route('tactivity.infoView')}}?id=@{{d.activity_id}}&user_id=@{{d.user_id}}&is_view=true">查看</a>
                                <a btnPermission="396" class="layui-btn layui-btn-primary layui-btn-xs push" lay-event="push">@{{# if(d.is_push == '1'){ }}取消推优@{{# }else{}}推优@{{# } }}</a>
                                <a btnPermission="253" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="download">下载</a>
                            </script>

                            <table class="layui-table" id="teachingActivityTable" lay-filter="teachingActivityTable" ></table>
                            <div class="pagebarbox" style="text-align: end"><div id="pageBar" class="pagebar"></div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-row">
            <div class="opt-area">
                <a href="javascript:history.go(-1);" class="layui-btn layui-btn-primary back-btn">返回</a>
            </div>
        </div>
    </div>
</div>

<!---二维码渲染-->
<div id="view-qr-code" style="display:none"></div>
<script type="text/html" id="qrCodeView">
    <div>
        <img style="margin-left: 110px;" src="@{{d.qrcode}}" >
    </div>
    <div >
        <div class="layui-inline" style="width: 80%;margin-left: 60px;margin-top: 20px">
            <div class="layui-input-inline" style="width:65%" >
                <input type="text" id="qrcode-url" value="@{{d.url}}" placeholder="请输入外部链接地址" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width:30%" >
                <button id="copy" class="pear-btn pear-btn-primary" type="button" >复制链接</button>
            </div>
        </div>
    </div>
</script>

<script id="fileShowDemo" type="text/html">
<ul>
@{{#  layui.each(d, function(index, item){ }}
@{{#  if(item){ }}
    <li style="min-width: 200px;margin: 13px 5px;">
        <a style="color: #0e90d2;" target="_blank" title="@{{item.file_info.file_name}}" href="@{{item.file_info.file_dir}}@{{item.file_info.file_path}}">
            <span style="display: inline-block;max-width: 90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">@{{item.file_info.file_name}}</span>
        </a>
        <a style="color:#74B8FF" href="@{{item.file_info.file_dir}}@{{item.file_info.file_path}}" download="@{{item.file_info.file_name}}">
            <span class="icon pear-icon pear-icon-download" style="color:#74B8FF;margin-left:10px;"></span>
        </a>
    </li>
@{{#  } }}
@{{#  }); }}
</ul>
</script>
@endsection
